<template>
  <div id="system_knowledgeBase">
    <div class="step-one" v-if="knowledgeList && knowledgeList.length > 0">
      <div class="step-one-content">
        <div
          class="all-box"
          v-for="(item, index) in knowledgeList"
          :key="index"
          @click="goKnowledgeDetail(item)"
        >
          <div class="body-content">
            <div class="one-title">
              <el-icon size="20" color="#7487FE">
                <FolderOpened />
              </el-icon>
              <div>{{ item.name }}</div>
            </div>
            <div class="one-content">{{ item.description }}</div>
          </div>
          <div class="footer">
            <div class="foot-left">
              <span>是否已纳入教学：</span>
              <span class="caina">{{ item.used ? "已采纳" : "未采纳" }}</span>
            </div>
          </div>
          <!-- <div class="one-nums">
            <div> 
              <div class="one-num">{{ item.num1 }}</div>
              <div class="one-num-title">文档数</div>
            </div>
            <div>
              <div class="one-num">{{ item.num2 }}</div>
              <div class="one-num-title">千字符数</div>
            </div>
            <div>
              <div class="one-num">{{ item.num3 }}</div>
              <div class="one-num-title">关联应用</div>
            </div>
          </div> -->
          <!-- <div class="one-tabs">
            <div class="one-tab">
              <div>
                <el-icon size="14">
                  <PriceTag />
                </el-icon>
              </div>
              <div>
                {{ item.tab }}
              </div>
            </div>
            <div class="one-menu">
              <el-icon color="#475467">
                <MoreFilled />
              </el-icon>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="no-data" v-else>
      <img src="@/assets/img/no-data.png" alt="" />
      <div class="no-data-text">暂无内容</div>
    </div>
    <!-- 新增/编辑弹窗 -->
    <el-dialog
      class="addOrEditDialog"
      v-model="showAddOrEditDialog"
      width="40%"
      :close-on-click-modal="false"
      :before-close="() => (showAddOrEditDialog = false)"
    >
      <el-form :model="form" label-width="auto" :rules="rules" ref="formRef">
        <el-form-item label="知识库名称：" prop="knowledgeBaseName">
          <el-input v-model="form.knowledgeBaseName" />
        </el-form-item>
        <el-form-item label="知识库简介：" prop="knowledgeBaseDesc">
          <el-input
            v-model="form.knowledgeBaseDesc"
            type="textarea"
            resize="none"
            style="width: 900px"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button color="#155EEF" @click="saveKnowledgeBase()">
            保存
          </el-button>
          <el-button @click="showAddOrEditDialog = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      courseId: "",
      knowledgeList: [],
      showAddOrEditDialog: false,
      isEdit: false,
      editId: "",
      form: {
        knowledgeBaseName: "",
        knowledgeBaseDesc: "",
      },
      rules: {
        knowledgeBaseName: [
          { required: true, message: "请输入知识库名称", trigger: "blur" },
        ],
        knowledgeBaseDesc: [
          { required: true, message: "请输入知识库简介", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.courseId = localStorage.getItem("courseId");
    this.getKnowledgeList();
  },
  methods: {
    // 获取知识库列表
    getKnowledgeList() {
      this.$axios
        .get(
          `/tes/course/auto/make/listCourseBookFile?courseId=${this.courseId}`
        )
        .then((res) => {
          this.knowledgeList = res.data;
        });
    },

    // 新增知识库
    addKnowledgeBase() {
      this.isEdit = false;
      this.showAddOrEditDialog = true;
      this.form = {
        knowledgeBaseName: "",
        knowledgeBaseDesc: "",
      };
    },

    // 编辑知识库
    editKnowledgeBase(item) {
      this.isEdit = true;
      this.showAddOrEditDialog = true;
      this.form = {
        knowledgeBaseName: item.name,
        knowledgeBaseDesc: item.description,
      };
      this.editId = item.id;
    },

    // 删除知识库
    deleteKnowledgeBase(item) {
      this.$confirm("确定删除该知识库吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios
          .delete(`/tes/course/auto/make/deleteCourseBookFile?id=${item.id}`)
          .then((res) => {
            this.$message.success("删除成功");
            this.getKnowledgeList();
          });
      });
    },

    // 保存知识库
    saveKnowledgeBase() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          const queryObj = {
            courseId: this.courseId,
            name: this.form.knowledgeBaseName,
            description: this.form.knowledgeBaseDesc,
          };
          if (!this.isEdit) {
            this.$axios
              .post(`/tes/course/auto/make/addCourseBookFile`, queryObj)
              .then((res) => {
                this.getKnowledgeList();
                this.showAddOrEditDialog = false;
                this.$message.success("添加成功");
              });
          } else {
            this.$axios
              .post(
                `/tes/course/auto/make/updateCourseBookFile/${this.editId}`,
                queryObj
              )
              .then((res) => {
                this.getKnowledgeList();
                this.showAddOrEditDialog = false;
                this.$message.success("修改成功");
              });
          }
        }
      });
    },

    // 跳转知识库详情
    goKnowledgeDetail(item) {
      if (!item.kbId) {
        this.$message.warning("请先配置知识库内容");
        return;
      }
      this.$router.push({
        path: "/aiTeaching/courseSystem/knowledgeBaseDetail",
        query: { id: item.id, kbId: item.kbId },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#system_knowledgeBase {
  background-color: #f3f5fa;
  padding: 40px 30px;
  box-sizing: border-box;
  min-height: 650px;
  .all-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
  }
  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 220px 0;
    gap: 10px;
    width: 100%;
    .no-data-text {
      font-size: 16px;
      color: #999;
    }
  }

  .step-one {
    margin-bottom: 20px;
    .step-one-content {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      > div {
        width: calc(25% - 15px);
        height: 220px;
        cursor: pointer;
        &:hover {
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.one-add {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 14px;
          > div {
            font-size: 16px;
            color: #272839;
          }
          &:hover {
            background: #f2f4f7;
          }
        }

        .body-content {
          .one-title {
            display: flex;
            gap: 10px;
            align-items: center;
            font-size: 16px;
            color: #140e35;
            margin-bottom: 11px;
            i {
              fill: red;
            }
          }
          .one-content {
            font-size: 12px;
            color: #9293ab;
            margin-bottom: 21px;
            max-width: 306px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: wrap;
            word-wrap: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 6;
            -webkit-box-orient: vertical;
          }
        }
        .footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          .foot-left {
            display: flex;
            align-items: center;
            .caina {
              color: #457aff;
            }
          }
          .foot-right {
            display: flex;
            align-items: center;
            gap: 10px;
            .edit {
              display: flex;
              align-items: center;
              cursor: pointer;
              color: #457aff;
              i {
                margin-right: 4px;
              }
            }
            .delete {
              display: flex;
              align-items: center;
              cursor: pointer;
              color: #457aff;
              i {
                margin-right: 2px;
              }
            }
          }
        }
        .one-nums {
          display: flex;
          height: 56px;
          background: #f8faff;
          border-radius: 6px;
          margin-bottom: 10px;
          gap: 10px;
          > div {
            position: relative;
            width: calc(100% / 3 - 10px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 9px;
            .one-num {
              font-size: 12px;
              color: #4658ff;
            }
            .one-num-title {
              font-size: 12px;
              color: #43436b;
            }
            &::after {
              position: absolute;
              right: 0;
              content: "";
              display: block;
              width: 1px;
              height: 27px;
              background: #e6e6f7;
            }
            &:last-child::after {
              display: none;
            }
          }
        }
        .one-tabs {
          display: flex;
          align-items: center;
          gap: 11px;
          .one-tab {
            display: flex;
            align-items: center;
            gap: 4px;
            width: 100%;
            height: 32px;
            background: #f2f4f7;
            border-radius: 6px;
            font-size: 12px;
            color: #475467;
            padding: 0 10px;
            box-sizing: border-box;
          }
          .one-menu {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 32px;
            min-width: 32px;
            height: 32px;
            background: #f2f4f7;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>

<!-- 弹窗样式 -->
<style lang="scss">
.addOrEditDialog {
  .el-dialog {
    height: 680px !important;
  }

  .el-dialog__body {
    padding: 50px !important;
  }

  .el-textarea__inner {
    height: 323px !important;
    min-height: 323px !important;
  }
}
</style>